<template>
  <div class="buy-log">
    <SearchForm
      v-model="formOption.data"
      :form-option="formOption"
      :show-arrow="true"
      :show-btn="true"
      :btn-list="btnList"
      label-width="110px"
    />

    <div class="mt-20">
      <PageTable
        :columns="columns"
        :options="options"
        :data="dataSource"
        @selectChange="selectHandle"
      />
    </div>

    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getNewcomerOrderList"
    />
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
export default {
  name: 'BuyLogList',
  data() {
    return {
      formOption: {
        data: {},
        rules: {},
        items: [
          {
            type: 'input',
            label: '订单编号',
            value: 'orderNo',
            placeholder: '请输入商品名称进行搜索',
            style: {
              width: '200px'
            }
          },
          {
            type: 'datetimerange',
            label: '下单时间',
            value: 'time'
          },
          {
            type: 'input',
            label: '昵称/手机',
            value: 'userInfo',
            placeholder: '请输入客户昵称/手机号进行搜索',
            style: {
              width: '240px'
            }
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getNewcomerOrderList()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.formOption.data = {}
            this.listQuery.pageNo = 1
            this.getNewcomerOrderList()
          }
        },
        {
          label: '导出',
          onClick: () => {
            this.exportFile()
          }
        }
      ],
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      options: {
        select: true,
        border: true
      },
      dataSource: [],
      columns: [
        {
          label: '客户信息',
          render: (h, { row }) => {
            return (
              <div class="flex items">
                <img style={'width: 50px;height: 50px;'} src={row.userInfo.profilePhoto} />
                <div class="ml-10 flex flex-col justify-between">
                  <p>{row.userInfo.nickName}</p>
                  <p>{row.userInfo.mobile}</p>
                </div>
              </div>
            )
          }
        },
        {
          prop: 'createdTime',
          label: '下单时间'
        },
        {
          prop: 'orderNo',
          label: '订单编号',
          render: (h, { row }) => {
            return (
              <div>
                <p>{row.orderNo}</p>
                <el-button
                  type="text"
                  onClick={() =>
                    this.$router.push({ name: 'OrderList', query: { orderNo: row.orderNo } })
                  }
                >
                  查看订单
                </el-button>
              </div>
            )
          }
        },
        {
          prop: 'realityAmount',
          label: '消耗积分'
        },
        {
          prop: 'remark',
          label: '备注',
          render: () => {
            return <div>新人体验订单</div>
          }
        }
      ],
      selectList: []
    }
  },
  watch: {},
  created() {
    this.getNewcomerOrderList()
  },
  methods: {
    // 获取购买列表
    async getNewcomerOrderList() {
      const params = {
        ...this.listQuery,
        ...this.formOption.data
      }
      const { time } = this.formOption.data
      if (time) params.startTime = time[0] && time[0]
      if (time) params.endTime = time[0] && time[1]
      delete params.time
      const {
        data: { total, records }
      } = await this.$http.order.orderApi.getNewcomerOrderList(params)
      this.total = total
      this.dataSource = records
    },
    // 监听选中
    selectHandle(val) {
      this.selectList = val
    },
    // 导出
    exportFile() {
      if (!this.selectList.length) return this.$message.error('请选择要导出的数据！')
      const headerData = this.columns.filter(item => item.prop).map(item => item.label)
      headerData.splice(0, 0, '用户名')
      headerData.splice(1, 0, '手机号码')
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      filterData.splice(0, 0, 'nickName')
      filterData.splice(1, 0, 'userMobile')
      const list = this.$lodash.cloneDeep(this.selectList).map(item => {
        item.nickName = item.userInfo?.nickName
        item.mobile = item.userInfo?.mobile
        item.remark = '新人体验订单'
        return item
      })
      export2Excel(headerData, list, filterData, '购买记录', () => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
